<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | Data Tables</title>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header-compent></header-compent>

  <nav-menu></nav-menu>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="min-height: 900px;">

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header" style="float:right;">
              <button type="button" class="btn btn-block btn-primary" (click)="newClick()">新增</button>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>username</th>
                  <th>email</th>
                  <th>disabled</th>
                  <th>createTime</th>
                  <th>lastTime</th>
                  <th>ChangeStatus</th>
                  <th>Delete</th>
                  <th>grantRoles</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let user of users" (click)="itemClick(user.id)">
                  <td>{{user.username}}</td>
                  <td>{{user.email}}</td>
                  <td>{{disabled(user.disabled)}}</td>
                  <td>{{user.createTime | date:"yyyy-MM-dd HH:mm"}}</td>
                  <td>{{user.lastTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
                  <td><a style="cursor: pointer;" (click)="changeStatus(user.id,user.disabled);$event.stopPropagation();">{{disabled(!user.disabled)}}</a></td>
                  <td><a style="cursor: pointer;" (click)="del(user.id);$event.stopPropagation();">Del</a></td>
                  <td><a style="cursor: pointer;" (click)="grant(user.id);$event.stopPropagation();">Grant</a></td>
                </tr>


              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <footer-compent></footer-compent>
</div>
<!-- ./wrapper -->


</body>
</html>
